<template>
 <div>
  <div style="padding: 0px 40px">
    <div>
      <P class="menu-tile">购物车</P> <el-divider />
      <div class="buttom-bottom">
        <div style="padding: 10px 0">
          <span
            style="
              margin-left: 10px;
              color: rgb(64, 139, 255);
              font-weight: 800;
              font-size: 16px;
            "
            >统计:</span
          >
          总价:<span :style="totalMenoy >= 100 ? 'color:red' : ''"
            >{{ totalMenoy }}元；</span
          >
          份数:<span :style="dishNumber >= 5 ? 'color:red' : ''"
            >{{ dishNumber }}份</span
          >
        </div>
        <el-button
          v-if="!shoppingCart.length == 0"
          @click="submitOrder()"
          type="primary"
        >
          提交购物车至订单</el-button
        >
      </div>

      <el-dialog width="35%" title="收货地址" v-model="addressDialo">
        <div v-if="addressList == 0" class="bodyBorder">
          <div style="padding: 50px 30px">
            <span>收货地址</span>：
            <span>暂无收货地址，</span>
            <span
              style="color: blue; cursor: pointer; font-weight: 600"
              @click="toAddress()"
              >添加收货地址
            </span>

            <div></div>
          </div>
        </div>
        <div v-if="!addressList == 0" class="bodyBorder">
          <div style="padding: 20px 20px">
            <div class="dialogBorder" style="">
              选择收货地址：
              <el-select
                v-model="orderAddress"
                @change="
                  displayAddress =
                    orderAddress.name + ' ------ ' + orderAddress.mph
                "
              >
                <el-option
                  v-for="item in addressList"
                  :value="item"
                  :key="item.id"
                  :label="displayAddress"
                >
                  <span style="float: left">{{ item.name }}</span>
                  <span
                    style="
                      float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;
                    "
                  >
                    {{ item.mph }}
                  </span></el-option
                >
              </el-select>
            </div>
            <el-form width="20%" label-width="103" :model="orderAddress">
              <el-form-item label="姓名:">
                <el-input v-model="orderAddress.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="手机号:">
                <el-input v-model="orderAddress.phone" disabled></el-input>
              </el-form-item>
              <el-form-item label="收货地址:">
                <el-input v-model="orderAddress.shAddress" disabled></el-input>
              </el-form-item>
              <el-form-item label="门牌号:">
                <el-input v-model="orderAddress.mph" disabled></el-input>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input v-model="remark"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="subAddress()">
              {{ "确认" }}
            </el-button>
            <el-button @click="addressDialo = false">取消</el-button>
          </div>
        </template>
      </el-dialog>

      <div class="title-qita1">
        <el-divider direction="vertical" />
        购物车详情
      </div>
      <div style="margin-bottom: 20px">
        <el-table
          :data="shoppingCart"
          border
          stripe
          :header-cell-style="{
            'text-align': 'center',
            color: '#515a6e',
            background: '#f8f8f9',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="font-size: 16px"
        >
          <!-- <el-table-column label="序号" type="index" width="60"></el-table-column> -->
          <el-table-column label="图片" prop="name">
            <template #default="scope">
              <div class="demo-image__preview">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.photo"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="srcList"
                  :initial-index="4"
                  fit="cover"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="份数">
            <template #default="scope">
              <el-input-number
                v-model="scope.row.copies"
                :min="0"
                :max="10"
                @change="handleChange(scope)"
                :class="hhh"
              />
            </template>
          </el-table-column>
          <el-table-column label="价格" prop="money">
            <template #default="scope">
              <span :class="scope.row.money >= 100 ? 'menoyColor' : ''"
                >{{ scope.row.money }}元</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="danger" size="small" @click="del(scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
 </div>
</template>

<script>
import { reactive, toRefs, h } from "vue";
import { shoppingList, change, delShopping } from "@/api/shoppingCart";
import { ElMessageBox } from "element-plus";
import { list } from "@/api/personalCenter/address";
import router from "@/router";
import { addOrder } from "@/api/order";
import { displayBoxInfo } from "@/utils/msg";
export default {
  name: "shoppingCart",
  setup() {
    let data = reactive({
      displayAddress: "", //下拉框回显
      addressList: "", //收货地址列表
      orderAddress: "", //订单收货地址
      addressDialo: false,
      shoppingCart: [],
      dishNumber: 0, //总份数
      totalMenoy: 0, //总价
      remark: "", //提交订单时的备注
      userId: JSON.parse(localStorage.getItem("userInfo")).id,
    });

    // 购物车列表
    let listShopping = () => {
      shoppingList({
        id: data.userId,
      }).then((res) => {
        data.shoppingCart = res.data;
        console.log(data.shoppingCart.length);
        data.totalMenoy = 0;
        data.dishNumber = 0;
        res.data.forEach((item) => {
          data.totalMenoy += item.money;
          data.dishNumber += item.copies;
        });
      });
    };
    listShopping();

    //修改购物车数量
    let handleChange = (scope) => {
      console.log(111);
      let params = {
        id: scope.row.id,
        userId: data.userId,
        copies: scope.row.copies,
      };
      change(params).then((res) => {
        if (res.code == 1) {
          listShopping();
        }
      });
    };

    //查询地址列表
    let submitOrder = () => {
      data.addressDialo = true;
      list({ userId: data.userId }).then((res) => {
        data.addressList = res.data;
        data.orderAddress = data.addressList[0];
        data.displayAddress =
          data.orderAddress.name + " ------ " + data.orderAddress.mph;
      });
    };

    let subAddress = () => {
      ElMessageBox.confirm(
        h("p", null, [
          h("span", null, "确认收货地址为："),
          h("i", { style: "color:red" }, data.displayAddress),
          h("span", null, " ?"),
          h("span", null, " 以及提交订单"),
        ]),
        "提示"
      )
        .then(() => {
          let params = {
            userId: data.userId,
            addressId: data.orderAddress.id,
            totalCopies: data.dishNumber,
            amount: data.totalMenoy,
            consignee: data.orderAddress.name,
            phone: data.orderAddress.phone,
            address: data.orderAddress.shAddress + data.orderAddress.mph,
            remark: data.remark,
            orderDetails: data.shoppingCart,
          };
          addOrder(params).then((res) => {
            displayBoxInfo(res.code, res.msg);
            if (res.code == 1) {
              router.push({ name: "order" });
            }
          });
        })
        .catch(() => {});
    };

    //删除购物车
    let del = (scope) => {
      ElMessageBox.confirm(
        h("p", null, [
          h("span", null, "删除后将无法恢复，确认删除名称为 "),
          h("i", { style: "color:red" }, scope.row.name),
          h("span", null, " ?"),
        ]),
        "提示"
      )
        .then(() => {
          delShopping({ id: scope.row.id }).then((res) => {
            if (res.code == 1) {
              listShopping();
            }
          });
        })
        .catch(() => {});
    };

    //跳转收货地址菜单项
    let toAddress = () => {
      router.push({ name: "address" });
    };

    return {
      ...toRefs(data),
      handleChange,
      listShopping,
      del,
      submitOrder,
      subAddress,
      toAddress,
    };
  },
};
</script>

<style  scoped>
.menu-tile {
  /* border: 1px solid red; */
  font-weight: 600;
  color: #000;
  font-size: 16px;
  margin-top: 30px;
}

.menoyColor {
  color: red;
}

.buttom-bottom {
  background-color: #eff6ff;
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.3);
  border-radius: 8px;
  padding: 20px 0px;
  margin: 30px 0px;
}

.title-qita1 {
  font-size: 16px;
  font-weight: 600;
  margin: 25px 0 10px 0;
  line-height: 16px;
}

.el-divider--vertical {
  margin: none !important;
  border-left: 6px solid #2d8cf0;
}

.el-dialog__title {
  display: inline-block;
  width: 100%;
  padding-bottom: 8px;
  font-size: 16px;
  color: #122649;
  font-weight: 600 !important;
  border-bottom: 1px solid #ddd !important;
}

.dialogBorder {
  margin-bottom: 20px;
}

.el-dialog__body {
  padding: 10px 30px;
}

.bodyBorder {
  box-shadow: 0 0 5px 5px hsla(0, 0%, 78.4%, 0.2);
}
</style>

